<template>
  <div>
    <div class="c-flex c-mg-b-5p">
      <div class="c-flex-item-auto">
        <slot name="toolbar-left"></slot>
      </div>
      <div>
        <slot name="toolbar-right"></slot>
        <el-button :type="expandQuery ? undefined : 'primary'" @click="expandQuery = !expandQuery">
          查询器
          <el-icon class="el-icon--right">
            <el-icon-arrowUp v-show="expandQuery" />
            <el-icon-arrowDown v-show="!expandQuery" />
          </el-icon>
        </el-button>
      </div>
    </div>
    <div>
      <el-form ref="formRef" :model="params" class="__query-box c-query-form" inline v-show="expandQuery"
        @keyup.prevent.enter="query()">
        <div class="c-flex c-flex-main-center">
          <div>
            <slot></slot>
          </div>
        </div>
        <div class="c-text-center c-mg-t-10p">
          <el-button text :icon="ElIconSearch" type="primary" @click="query()" :disabled="queryButtonDisabled"
            :loading="loading">
            <el-icon><el-icon-search /></el-icon>
            <span>查询</span>
          </el-button>
          <el-button text @click="resetQuery" :disabled="disabled">重置</el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted, useTemplateRef } from 'vue';
import { cloneDeepObject, cloneObjectValue } from '@/utils/common';

const props = defineProps({
  params: {
    type: Object
  },
  queryButtonDisabled: {
    type: Boolean,
    default: false
  },
  loading: {
    type: Boolean,
    default: false
  }
})
const initParams = ref(null)
onMounted(() => {
  initParams.value = cloneDeepObject(props.params)
})
const emits = defineEmits(["query"])
const formRef = useTemplateRef("formRef")
const expandQuery = defineModel("expandQuery", {
  type: Boolean,
  default: true
})

const query = () => {
  var params = cloneDeepObject(props.params);
  emits("query", params)
};
//重置查询条件
const resetQuery = () => {
  cloneObjectValue(props.params, initParams.value)
  // formRef.value.resetFields()
}
</script>

<style lang="scss">
.__query-box {
  border: 1px solid #e4e7ed;
  border-radius: 2px;
  padding: 15px 5px 5px 10px;

  .el-input {
    --el-input-width: 120px;
  }

  .el-select {
    --el-select-width: 120px;
  }
}
</style>